<template>
  <div class="hs-et">
    <div class="hs-et-wrap" id="top-root"></div>
  </div>
</template>

<script>
//入驻企业类型top5
import * as echarts from "echarts";

const option = {
  roam: false,
  title: {
    text: "-  入驻企业类型TOP5  -",
    left: "center",
    top: 10,
    textStyle: {
      color: "#CFEEF8",
      fontSize: 14,
    },
  },
  tooltip: {
    show: false,
  },
  grid: {
    x: "0%",
    x2: "0%",
    y: "15%",
    y2: "15%",
    left: 45,
  },
  xAxis: {
    axisLabel: {
      interval: 0,
      rotate: 0,
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
    axisLine: {
      lineStyle: {
        color: "#15416A",
      },
    },
    axisTick: {
      show: false,
    },
    data: [],
  },
  yAxis: {
    show: true,
    type: "value",
    name: "",
    splitLine: {
      //刻度线
      lineStyle: {
        color: "#15416A",
        type: "dashed",
      },
    },
    axisTick: {
      show: true,
    },
    axisLabel: {
      //调整y轴的lable
      textStyle: {
        fontSize: 12, // 让字体变大
        color: "#fff",
      },
      show: true,
    },
    axisLine: {
      axisLine: {
        lineStyle: {
          color: "#0A3E73",
          width: 20,
        },
      },
    },
    data: [],
  },
  series: [
    {
      name: "a",
      tooltip: {
        show: true,
      },
      data: [],
      type: "bar",
      barWidth: 18,
      barGap: 200,
      barCategoryGap: 200,
      label: {
        show: true,
        position: "top",
        top: 0,
        fontSize: 6,
        offset: [0, -10],
        formatter: function (params) {
          let num = params.value;
          if (num > 1024) {
            return (num / 1024).toFixed(2) + "GB";
          } else if (num < 1024 && num > 0) {
            return num.toFixed(2) + "MB";
          } else {
            return "";
          }
        },
        color: "red",
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#4729fb",
              },
              {
                offset: 0.5,
                color: "#3077f7",
              },
              {
                offset: 1,
                color: "#1fb0f4",
              },
            ],
            false
          ),
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "white",
              fontSize: 10,
            },
          },
        },
      },
    },
    {
      type: "bar",
      barWidth: 8,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#235dff",
              },
              {
                offset: 0.5,
                color: "#59acf7",
              },
              {
                offset: 1,
                color: "#71caff",
              },
            ],
            false
          ),
        },
      },
      barGap: 0,
      data: [],
    },
    {
      name: "b",
      tooltip: {
        show: false,
      },
      cursor: "default",
      type: "pictorialBar",
      itemStyle: {
        borderWidth: 0,
        borderColor: "#47a6ff",
        color: "#1ac0f4",
      },
      symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z",
      symbolSize: ["27", "4"],
      symbolOffset: ["-1", "-2"],
      symbolRotate: 0,
      symbolPosition: "end",
      color: "rgb(255, 0, 255)",
      data: [],
      z: 3,
    },
  ],
};

export default {
  name: "enterpriseTop5",
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(function () {
      this.drawbar("top-root");
      return;
      var that = this;
      var resizeETTimer = null;
      window.onload = function () {
        if (resizeETTimer) {
          clearTimeout(resizeETTimer);
        }
        resizeETTimer = setTimeout(() => {
          that.drawbar("top-root");
        }, 300);
      };
    });
    this.$store.watch(
      (state, getter) => {
        return state.statistical.enterpriseTop5;
      },
      () => {
        this.drawbar("top-root");
      }
    );
  },
  methods: {
    drawbar(id) {
      let o = document.getElementById(id);
      let height = o.clientHeight;
      let width = o.clientWidth;
      o.style.height = height + "px";
      o.style.width = width + "px";
      this.chart = echarts.init(o, null);
      option.xAxis.data = this.$store.state.statistical.enterpriseTop5.map(
        (item) => item.name
      );
      option.yAxis.data = this.$store.state.statistical.enterpriseTop5.map(
        (item) => item.value
      );
      option.series[1].data = this.$store.state.statistical.enterpriseTop5.map(
        (item) => item.value + item.value * 0.025
      );
      option.series[0].data = option.series[2].data =
        this.$store.state.statistical.enterpriseTop5.map((item) => item.value);
      this.chart.setOption(option);
    },
  },
};
</script>

<style scoped>
.hs-et {
  /* border: 1px solid green; */
  width: 100%;
  height: 100%;
}
.hs-et-wrap {
  /* border: 1px solid yellow; */
  width: 100%;
  height: 100%;
}
</style>